<template>
  <div class="alert_container" v-show="visible">
    <div class="alert_wrapper">
      <div class="alert_content">
        <h3 class="alert_title">{{ title }}</h3>
        <div class="alert_message">{{ message }}</div>
        <div class="alert_btn">
          <button @click="cancel">取 消</button>
          <button @click="confirm">确 认</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "",
      title: "",
      visible: false,
    };
  },
  methods: {
    cancel() {
      console.log("取消");
      this.visible = false;
    },
    confirm() {
      console.log("确认");
      this.visible = false;
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  padding: 0;
  margin: 0;
}
.iline-flex {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.alert_container {
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 999999999;
  .alert_wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    .alert_content {
      width: 70%;
      border-radius: 10px;
      background-color: #fff;
      padding: 10px 20px;
      .alert_title {
        width: 100%;
        height: 30px;
        @extend .iline-flex;
      }
      .alert_message {
        width: 100%;
        height: 100px;
        @extend .iline-flex;
      }
      .alert_btn {
        width: 100%;
        height: 30px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;

        border-radius: 16px;
        button {
          width: 50%;
          height: 30px;
          @extend .iline-flex;
          border: none;
          outline: none;
          background-color: red;
          color: #fff;
          &:first-child {
            border-radius: 16px 0 0 16px;
          }
          &:last-child {
            border-radius: 0 16px 16px 0;
          }
        }
      }
    }
  }
}
</style>
